import { observer } from "mobx-react-lite";
import { useStore } from "../../store";
import { emitter } from "../../eventEmitter";


const CreateBone = observer((props: any) => {
    const { toolBarStore, transformBarStore } = useStore();
    let className = ["inline-block", "p-1", "text-gray-700", "hover:bg-gray-50", "focus:relative"];
    if (toolBarStore.curMode === "createBone") {
        className.push("bg-gray-50");
    }
    const handleClick = () => {
        toolBarStore.setCurMode("createBone");
        transformBarStore.setMode("transform");
        emitter.emit("changeModeType", "createBone");
    };

    return (
        <button
            className={className.join(" ")}
            title="Create Bone"
            onClick={handleClick}
        >
            <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="#bababa"
                stroke="#bababa"
                version="1.1"
                viewBox="0 0 472.615 472.615"
                className="w-4 h-4"
            >
                <path d="M278.565 194.051L278.565 0 194.053 0 194.053 194.051 0 194.051 0 278.564 194.053 278.564 194.053 472.615 278.565 472.615 278.565 278.564 472.615 278.564 472.615 194.051z"></path>
            </svg>
        </button>
    );
});

export { CreateBone };